<template>
<!-- 添加试卷 -->
  <div>
    <h2>添加试卷</h2>
    <el-card class="box-card">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="活动名称" prop="title"></el-form-item>
            <el-input v-model="ruleForm.title"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="考试类型" prop="exam_id"></el-form-item>
            <el-select v-model="ruleForm.exam_id" placeholder="请选择">
              <el-option
                v-for="item in ExamType.data"
                :key="item.exam_id"
                :label="item.exam_name"
                :value="item.exam_id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="选择课程" prop="subject_id"></el-form-item>
            <el-select v-model="ruleForm.subject_id" placeholder="请选择">
              <el-option
                v-for="item in Subject.data"
                :key="item.subject_id"
                :label="item.subject_text"
                :value="item.subject_id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3">
            <el-form-item label="选择题量" prop="number">
            </el-form-item>
              <el-input-number v-model="ruleForm.number" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="15">
            <el-form-item label="活动时间" required>
            </el-form-item>
            <el-form-item prop="start_time">
              <el-row :gutter="20">
                <el-col :span="8"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.start_time" style="width: 100%;"></el-date-picker></el-col>
                <el-col :span="8"><el-time-picker placeholder="选择时间" v-model="ruleForm.end_time" style="width: 100%;"></el-time-picker></el-col>
              </el-row>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" @click="btn">创建试卷</el-button>
    </el-card>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
  data() {
    return {
      ruleForm: {
        title: '',
        exam_id: '',
        subject_id: '',
        number: 4,
        start_time: 0,
        end_time: 0
      },
      exam_id: '',
      rules: {
        title: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
        exam_id: [{ required: true, message: '请输入考试类型', trigger: 'blur' }],
        subject_id: [{ required: true, message: '请输入课程', trigger: 'blur' }],
        number: [{ required: true, message: '请设置题量', trigger: 'blur' }],
        start_time: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        end_time: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }]
      }
    }
  },
  created () {
    this.getExam()
    this.getExamType()
    this.getSubject()
  },
  computed: {
    ...mapState({
      examlist: (state) => state.GetExam.examlist,
      ExamType: (state) => state.GetExam.ExamType,
      Subject: (state) => state.GetExam.Subject,
      ExamDetail: (state) => state.GetExam.ExamDetail
    })
  },
  methods: {
    ...mapActions(['getExam', 'getExamType', 'getSubject', 'getCondition', 'getExamDetail', 'postExamAdd']),
    ...mapMutations(['getExamListAll', 'getConditionAll']),
    handleChange (value) {
      console.log(value)
    },
    btn () {
      this.ruleForm.start_time = this.ruleForm.start_time * 1
      this.ruleForm.end_time = this.ruleForm.end_time * 1
      this.postExamAdd(this.ruleForm)
    }
  }
}
</script>

<style>
</style>
